<script lang="ts" setup>
import {
  isPermissionGranted,
  requestPermission,
  sendNotification,
} from "@tauri-apps/api/notification";
import { appWindow } from "@tauri-apps/api/window";
import { invoke } from "@tauri-apps/api";
import { onMounted } from "vue";
import { useRouter } from "vue-router";

onMounted(() => {
  setTimeout(() => {
    invoke("close_splashscreen");
  }, 5000);
});

const testEvent = () => {
  console.log("test event");
  // 发出一个只有当前窗口可见的事件
  appWindow.emit("startUse", "开始使用,最小化为托盘");
  invoke("hide_window");
};

const start = async () => {
  let permissionGranted = await isPermissionGranted();
  if (!permissionGranted) {
    const permission = await requestPermission();
    permissionGranted = permission === "granted";
  }
  if (permissionGranted) {
    sendNotification({
      title: "原子剪贴板已经接管了您的剪贴板",
      body: "效率提示一点点\n开开心心每一天!",
    });
  }
};
const router=useRouter()
const jump=()=>{
  router.push("/clip")
}
</script>
<template>
  <div>
    <h1>欢迎使用原子剪贴板</h1>
    <h1>welcome to atom clipboard</h1>
    <p>
      原子剪贴板是一个基于<b>tauri</b>的跨平台剪贴板应用，<br />它可以让你在简便快捷地使用剪贴板，并且可以<b
        >跨平台使用</b
      >
    </p>
    <!-- 特点：跨平台，轻量化，实用性 -->
    <ul>
      <li>跨平台</li>
      <li>轻量化</li>
      <li>实用性</li>
    </ul>
    <p>这是我们一直在努力的方向，我们会一直努力的完善它,感谢您的支持！</p>
    <p>如果您有任何问题，请联系我们</p>
    <div>
      <button
        @click="
          start();
          testEvent();
        "
      >
        开始使用
      </button>
      <button @click="jump()">跳转</button>
    </div>
  </div>
</template>
<style scoped>
/* 去掉li元素的前的圆点 */
ul {
  list-style: none;
}
</style>
